---
id: airbnbrating
title: AirbnbRating
---

import { IconsStyle } from "@site/src/components/Docs_Icons";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";
import { BiInfoCircle } from "react-icons/bi";
import Usage from "../component_usage/AirbnbRating.mdx";
import Play from "@site/playground/AirbnbRating/airbnbrating.playground";

<IconsStyle />

<div class="row inline-flex-center">
  <div class="col col--3">
    <h4>Import</h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`import { AirbnbRating } from '@rneui/themed';`}</CodeBlock>
  </div>
  <div class="col col--3">
    <h4>
      Theme Key{" "}
      <a href="../customizing#using-themeprovider">
        <BiInfoCircle />
      </a>
    </h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`AirbnbRating`}</CodeBlock>
  </div>
</div>

## Usage

<Usage />

## Props

<div class='table-responsive'>

| Name                   | Type                    | Default                                        | Description                                                                                                                 |
| ---------------------- | ----------------------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| `count`                | number                  | `5`                                            | Total number of ratings to display.                                                                                         |
| `defaultRating`        | number                  | `3`                                            | Initial value for the rating                                                                                                |
| `isDisabled`           | boolean                 | `false`                                        | Whether the rating can be modified by the user                                                                              |
| `onFinishRating`       | (value: number) => void |                                                | Callback method when the user finishes rating. Gives you the final rating value as a whole number                           |
| `ratingContainerStyle` | View Style              | `undefined`                                    | Style for rating container                                                                                                  |
| `reviewColor`          | string                  | `#f1c40f`                                      | Color value for review.                                                                                                     |
| `reviewSize`           | number                  | `40`                                           | Size value for review text.                                                                                                 |
| `reviews`              | string[]                | `['Terrible', 'Bad', 'Okay', 'Good', 'Great']` | Labels to show when each value is tapped.e.g. If the first star is tapped, then value in index 0 will be used as the label. |
| `selectedColor`        | string                  | `#004666`                                      | Color value for filled stars.                                                                                               |
| `showRating`           | boolean                 | `true`                                         | Determines if to show the reviews above the rating.                                                                         |
| `size`                 | number                  | `40`                                           | Size of rating image                                                                                                        |
| `starContainerStyle`   | View Style              | `undefined`                                    | Style for star container                                                                                                    |
| `starImage`            | string                  |                                                | Pass in a custom base image source                                                                                          |
| `starStyle`            | ImageStyle              |                                                | Style for star                                                                                                              |
| `unSelectedColor`      | string                  | `#BDC3C7`                                      | Color value for not filled stars.                                                                                           |

</div>

## Playground

<Play />
